<template>
  <view class="search-hospital">
    <u-search
      :show-action="true"
      actionText="搜索"
      :animation="true"
      v-model="keyword"
      @search="searchKeyword"
      @custom="searchKeyword"
    ></u-search>
    <view class="nav-box">
      <view
        class="nav-item"
        :class="{ active: navIndex == 0 }"
        @click="handelTapNav(0)"
        >距离最近</view
      >
      <view
        class="nav-item"
        :class="{ active: navIndex == 1 }"
        @click="handelTapNav(1)"
        >评价最好</view
      >
      <view
        class="nav-item"
        :class="{ active: navIndex == 2 }"
        @click="handelTapNav(2)"
        >医院等级</view
      >
    </view>

    <u-loading-icon text="加载中" textSize="18" v-if="loading"></u-loading-icon>
    <view class="hospital-list" v-if="!loading">
      <HospitalItem
        :itemData="item"
        v-for="item in hospitalList"
        :key="item.id"
      />
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import HospitalItem from "./components/hospitalItem.vue";
export default {
  name: "SearchHospital",
  data() {
    return {
      keyword: "",

      navIndex: 0,
    };
  },

  computed: {
    ...mapState({
      hospitalList: (store) => store.hospital.hospitalList,
      loading: (store) => store.hospital.loading,
    }),
  },

  mounted() {
    this.$store.dispatch("hospitalList", { distance: 1 });
  },

  methods: {
    fetchData(index) {
      let queryData = {};
      if (this.keyword.trim() != "") {
        queryData.hospitalName = this.keyword;
      }
      if (index == 0) {
        queryData.distance = 1;
      } else if (index == 1) {
        queryData.score = 1;
      } else if (index == 2) {
        queryData.level = 1;
      }
      this.$store.dispatch("hospitalList", queryData);
    },

    // 点击nav
    handelTapNav(index) {
      this.navIndex = index;
      // 重新获取数据
      this.fetchData(index);
    },

    // 搜索
    searchKeyword() {
      this.fetchData(this.navIndex);
    },
  },

  components: { HospitalItem },
};
</script>

<style lang='scss' scoped>
.search-hospital {
  padding: 40rpx;
  .nav-box {
    display: flex;
    align-items: center;
    margin-top: 40rpx;
    margin-bottom: 30rpx;
    .nav-item {
      color: $themeColor4;
      font-size: 28rpx;
      padding: 8rpx 20rpx;
      margin-right: 20rpx;
      border-radius: 99rpx;
      &.active {
        background: $themeColor4;
        color: #fff;
      }
    }
  }
}
</style>